@media screen and (min-width:900px) {
  .messageWrapper {
    margin-top: 20px;

    .textarea {
      font-size: 20px;
      padding: "10px";
      box-shadow: 2px 3px 1px #888;
      border: 1px solid #f90;
    }

    .send-btn {
      width: 100%;
      text-align: right;
    }

    .message-container {


      .message-item {
        width: 65%;
        background-color: #fff;
        margin: 10px 0;
        padding: 3px 8px;
        box-shadow: 2px 3px 3px #888;


        .title {
          position: relative;

          .user-avatar {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            vertical-align: middle;
          }

          .reply {
            margin-left: 10px;
            // margin-left: 30px;
            color: #666666;
            cursor: pointer;
          }

          .date {
            position: absolute;
            right: 10px;
            font-size: 12px;
            color: #666666;
          }
        }

        .content {
          margin-top: 10px;
        }

        .child-message {
          width: 95%;
          background-color: #eee;
          padding: 5px 20px;
          margin-left: 30px;
          border: 1px solid #f90;
          border-radius: 5px;
        }
      }

      .site-calendar-demo-card {
        .calendar {
          width: 270px;
          border: 1px solid #f0f0f0;
          border-radius: 2px;
          position: absolute;
          top: 280px;
          right: 0;
        }
      }

      .girl-picture {
        position: absolute;
        right: 0;
        top: 650px;
        width: 270px;

        .image {
          width: 100%;
        }
      }
    }

  }
}

@media screen and (max-width:900px) {
  .messageWrapper {
    margin-top: 20px;

    .textarea {
      font-size: 20px;
      padding: 10px;
      width: 90%;
      margin: 0 auto;
      display: block;
      box-shadow: 2px 3px 1px #888;
      border: 1px solid #f90;
    }

    .send-btn {
      margin-top: 10px;
      width: 100%;
      text-align: center;
    }

    .message-container {
      .message-item {
        width: 85%;
        background-color: #fff;
        margin: 10px auto;
        padding: 3px 8px;
        box-shadow: 2px 3px 3px #888;


        .title {
          position: relative;

          .user-avatar {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            vertical-align: middle;
          }

          .reply {
            margin-left: 10px;
            // margin-left: 30px;
            color: #666666;
            cursor: pointer;
          }

          .date {
            display: none;
          }
        }

        .content {
          margin-top: 10px;
        }

        .child-message {
          width: 95%;
          background-color: #eee;
          padding: 5px 20px;
          margin-left: 30px;
          border: 1px solid #f90;
          border-radius: 5px;
        }
      }

      .site-calendar-demo-card {
        display: none;
      }

      .girl-picture {
        display: none;
      }
    }
  }
}